<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Personal Portfolio Website</title>
    <link rel="stylesheet" type="text/css" href="style.css">

    <!-- box icons link -->
    <!-- 开源图标库 -->
    <link rel="stylesheet"
    href="https://unpkg.com/boxicons@latest/css/boxicons.min.css">
    
    <!-- Remix icons link -->
    <!-- 开源图标库 -->
    <link
    href="https://cdn.jsdelivr.net/npm/remixicon@4.3.0/fonts/remixicon.css"
    rel="stylesheet"/>

    <!-- google fonts link -->
    <!-- 字体库 -->
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Syne:wght@400..800&display=swap" 
    rel="stylesheet">
</head>
<body>

    <!-- header -->
    <header>
        <a href="#" class="logo"><img src="img/logo.png"></a>

        <ul class="menulist">
            <a href="#home" class="active">Home</a>
            <a href="#about">About</a>
            <a href="#services">Services</a>
            <a href="#portfolio">Portfolio</a>
            <a href="#contact">Contact</a>
        </ul>

        <div class="menu-right">
            <a href="#" class="menu-btn">
                <span>Let's Talk</span>
                <i class="ri-message-3-line"></i>
            </a>
            <div class="bx bx-menu" id="menu-icon"></div>
        </div>
    </header>

    <!-- home -->
    <section class="home" id="home">
        <div class="home-text">
            <a href="#" class="h-line">
                <i class="ri-shining-2-line"></i>
                <span>This is Tahmid Ahmed</span>
            </a>
            <h1>UI / UX and <br> <span class="input"></span></h1>
            <h4>With 5+ years of experience</h4>
            <div class="social-icons">
                <a href="#"><i class="ri-dribbble-line"></i></a>
                <a href="#"><i class="ri-behance-fill"></i></a>
                <a href="#"><i class="ri-instagram-fill"></i></a>
                <a href="#"><i class="ri-facebook-fill"></i></a>
                <a href="#"><i class="ri-pinterest-fill"></i></a>
            </div>

            <div class="h-btn"> 
                <a href="#" class="btn1">
                    My Works
                    <i class="ri-arrow-right-s-fill"></i>
                </a>

                <a href="#" class="btn2">
                    Download CV
                    <i class="ri-download-2-line"></i>
                </a>
            </div>
        </div>
    </section>
    
    <!-- about -->
    <section class="about" id="about">
        <div class="about-img">
            <img src="img/about.png">
        </div>

        <div class="about-text">
            <a href="#" class="h-line">
                <i class="ri-shining-2-line"></i>
                <span>About!</span>
            </a>
            <h1>More <span> About Me</span></h1>
            <h5>aaaaaaaaaaaaaaaaaaaaaaaaaaaa</h5>
            <p>aaaaaaaaaaaaaaaaaaaaaaaa! <br> <br>
            aaaaaaaaaaaaaaaaaaaa.</p>
            
            <div class="h-btn">
                <a href="#" class="btn1">
                    Hire Me
                    <i class="ri-arrow-right-s-fill"></i>
                </a>

                <a href="#" class="btn2">
                    Download CV
                    <i class="ri-download-2-line"></i>
                </a>

            </div>
        </div>
    </section>
    
    <!-- services -->
    <section class="services" id="services">
        <div class="services-left">
            <a href="#" class="h-line">
                <i class="ri-shining-2-line"></i>
                <span>My Services</span>
            </a>
            <h2>What I Provide <span>To My Client</span></h2>
            <p>aaaaaaaaaaa.<br> <br>aaaaaaaaaaaaa</p>
            <div class="h-btn">
                <a href="#" class="btn1">
                    View all
                    <i class="ri-arrow-right-s-fill"></i>
                </a>
    
                <a href="#" class="btn2">
                    Download CV
                    <i class="ri-download-2-line"></i>
                </a>
    
            </div>
        </div>
        
        <div class="services-right">
            <div class="box">
                <div class="box-icon">
                    <i class="ri-brush-line"></i>
                </div>

                <div class="box-text">
                    <h5>Design</h5>
                    <p>aaaaaaaaaaaaaaaaaaaaa.</p>
                </div>
            </div>
            <div class="box">
                <div class="box-icon">
                    <i class="ri-macbook-line"></i>
                </div>

                <div class="box-text">
                    <h5>Marketing</h5>
                    <p>aaaaaaaaaaaaaaaaaaaaa.</p>
                </div>
            </div>

            <div class="box">
                <div class="box-icon">
                    <i class="ri-macbook-line"></i>
                </div>

                <div class="box-text">
                    <h5>Development</h5>
                    <p>aaaaaaaaaaaaaaaaaaaaa.</p>
                </div>
            </div>

        </div>
    </section>

    <!-- portfolio -->
    <section class="portfolio" id="portfolio">
        <div class="mid-text">
            <a href="#" class="h-line">
                <i class="ri-shining-2-line"></i>
                <span>Portfolio!</span>
            </a>
            <h2>My Latest <span>Projects</span></h2>
        </div>

        <div class="portfolio-content">
            <div class="row">
                <div class="row-img">
                    <img src="img/p1.jpg">
                </div>

                <div class="row-in">
                    <div class="row-left">
                        <h3>Website Design</h3>
                        <h6>Web Desin, App Design</h6>
                    </div>
                    <div class="row-right">
                        <a href="#"><i class="ri-arrow-right-line"></i></a>
                    </div>
                </div>
            </div>
            <div class="row">
                <div class="row-img">
                    <img src="img/p2.jpg">
                </div>

                <div class="row-in">
                    <div class="row-left">
                        <h3>Website Design</h3>
                        <h6>Web Desin, App Design</h6>
                    </div>
                    <div class="row-right">
                        <a href="#"><i class="ri-arrow-right-line"></i></a>
                    </div>
                </div>
            </div>
            <div class="row">
                <div class="row-img">
                    <img src="img/p3.jpg">
                </div>

                <div class="row-in">
                    <div class="row-left">
                        <h3>Website Design</h3>
                        <h6>Web Desin, App Design</h6>
                    </div>
                    <div class="row-right">
                        <a href="#"><i class="ri-arrow-right-line"></i></a>
                    </div>
                </div>
            </div>

        </div>
    </section>

    <!-- contact -->
    <section class="contact" id="contact">
        <div class="contact-main">
            <a href="#" class="h-line">
                <i class="ri-shining-2-line"></i>
                <span>Contact!</span>
            </a>
            <h2>Got a Project` <span>Let's talk</span></h2>
            
            <div class="email">
                <p>Email:</p>
                <h6>yihao4635@163.com</h6>
            </div>

            <div class="num">
                <p>Call:</p>
                <h6>+86 18729451327</h6>
            </div>
            
            <div class="social-icons">
                <a href="#"><i class="ri-dribbble-line"></i></a>
                <a href="#"><i class="ri-behance-fill"></i></a>
                <a href="#"><i class="ri-instagram-fill"></i></a>
                <a href="#"><i class="ri-facebook-fill"></i></a>
                <a href="#"><i class="ri-pinterest-fill"></i></a>
            </div>
        </div>

        <form class="contact-form">
            <input type="text" placeholder="Your Name" required>
            <input type="email" name="" placeholder="Email address..." required>
            <textarea name="" id="" cols="30" rows="10" placeholder="Write Message here..." required></textarea>
            <input type="submit" value="Submit Now" class="submit-btn">
        </form>
    </section>

    <div class="footer">
        <div class="copyright">
            <p>@copyright Tahmid Ahmed All Rights Reserved.</p>
        </div>
        <a href="#home" class="scroll-top">
            <i class="ri-arrow-up-s-line"></i>
        </a>
    </div>

    <script src="https://unpkg.com/typed.js@2.1.0/dist/typed.umd.js"></script>

    <!-- js file -->
    <script src="script.js"></script>

</body>
</html>